<script setup>
import axiosInstance from '@/utils/request'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import BaseHeader from '@/components/BaseHeader.vue'

const router = useRouter()
const moveLogin = () => {
  router.push('/login')
}
const data = reactive({
  username: '',
  password: '',
  sms: ''
})
const getSms = () => {
  data.sms = '123456'
}
const forgetPwd = () => {
  showFailToast('功能开发中......')
}
</script>
<template>
  <base-header></base-header>
  <div class="main">
    <h5
      style="
        font-weight: 700;
        color: #9da1a6;
        margin: 10px;
        font-size: 18px;
      "
    >
      忘记密码!
    </h5>
  </div>
  <div style="margin-top: 40px">
    <van-form @submit="forgetPwd">
      <van-cell-group inset>
        <van-field
          v-model="data.username"
          name="账号"
          label="账号"
          placeholder="账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model="data.password"
          type="password"
          name="新密码"
          label="新密码"
          placeholder="新密码"
          :rules="[{ required: true, message: '请填写新密码' }]"
        />
        <van-field
          v-model="data.sms"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button @click="getSms" size="small" type="primary"
            >发送验证码
            </van-button
            >
          </template>
        </van-field>
      </van-cell-group>
      <div style="display: flex; justify-content: flex-end">
        <span
          style="
            font-size: 13px;
            color: #9c9c9c;
            margin-top: 10px;
            margin-right: 30px;
            cursor:pointer;
          "
          @click="moveLogin"
        >已有账号,立即登录</span
        >
      </div>
      <div style="margin-top: 40px" @click="forgetPwd">
        <van-button
          style="margin-bottom: 40px"
          round
          block
          type="primary"
          color="#0c34ba"
          @click="onLogin"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<style scoped>
/* 主要部分 */
.main {
  margin-top: 70px;
}
</style>
